@import '@bifrostui/styles/mixins/index.less';

.bui-picker-panel {
  --bui-picker-option-disabled-opacity: 0.38;
  flex: 1;
  flex-shrink: 0;
  position: relative;
  font-family: var(--bui-font-family);

  &-roller {
    transform: rotate3d(1, 0, 0, 60deg);
    transform-style: preserve-3d;
    position: absolute;
    top: var(--indicator-top);
    width: 100%;
    height: var(--option-height);
  }

  &-mask {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: linear-gradient(
        180deg,
        var(--bui-color-bg-alpha-light-9),
        var(--bui-color-bg-alpha-light-3)
      ),
      linear-gradient(
        0deg,
        var(--bui-color-bg-alpha-light-9),
        var(--bui-color-bg-alpha-light-3)
      );
    background-position: top, bottom;
    background-size: 100% var(--indicator-top);
    background-repeat: no-repeat;
    transform: translateZ(0);
  }

  &-indicator {
    position: absolute;
    top: var(--indicator-top);
    height: var(--option-height);
    width: 100%;
    border-top: 1px solid var(--bui-color-border-default);
    border-bottom: 1px solid var(--bui-color-border-default);
  }

  &-option {
    position: absolute;
    top: 0;
    left: 0;
    text-align: center;
    height: var(--option-height);
    line-height: var(--option-height);
    color: var(--bui-color-fg-default);
    font-size: var(--option-font-size);
    backface-visibility: hidden;
    .ellipsis();
    width: 100%;
  }

  &-option-disabled {
    opacity: var(--bui-picker-option-disabled-opacity);
  }

  &-option-hidden {
    visibility: hidden;
    opacity: 0;
  }
}
